﻿<%@ Page Title="" Language="C#" MasterPageFile="~/templates/general.master" AutoEventWireup="true" CodeFile="charts.aspx.cs" Inherits="charts" %>

<%@ MasterType VirtualPath="~/templates/general.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/font-awesome.min.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/animate-custom.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-css.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-responsive.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/charts.css")%>" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="js/main/jquery-ui-timepicker-addon.js"></script>
    <script src="js/charts/highcharts.src.js"></script>
    <script src="js/charts/highcharts-more.js"></script>
    <script src="js/charts/modules/exporting.js"></script>
    <script src="scripts/charts_filters.js"></script>
    <script src="scripts/livedata.js"></script>
    <script src="http://js.pusher.com/2.1/pusher.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="fullScreenItem loading" id="chartsPage">
        <div id="containerCenter">
            <div id="container">
                <div class="headerTitle">Charts</div>
            </div>
        </div>
        <div class="nav-metro">

            <!-- Start Sub Menu -->
            <input type="radio" class="nav-subctrl" id="submenu-2" name="navion">
            <div class="nav-submenu animated nav-fadeInUp">

                <!-- Start Sub Tab - Historic -->
                <label class="nav-subtab subtab-pos-2 solid-darkblue" for="nav-subtab-3c">
                    <span>Historic</span>
                </label>
                <!-- End Sub Tab - Historic -->

                <!-- Start Sub Tab Content - Historic -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-3c" checked />
                <div id="historic-panel" class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-2 solid-darkblue"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="nav-col-0 dark-text">
                            <div id="info" class="solid-red light-text" style="width: 758px; display: none; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                            </div>
                            <div class="one">
                                <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                    Device Name
                                </div>
                            </div>
                            <div class="two">
                                <select id="device-list" class="solid-darkblue light-text" style="width: 175px; text-align: center; height: 42px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select></td>
                            </div>
                            <div id="row-sensors" class="display-hidden">
                                <div class="one">
                                    <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                        Sensor Name
                                    </div>
                                </div>
                                <div class="two">
                                    <select id="sensor-list" class="solid-darkblue light-text" style="width: 175px; text-align: center; height: 42px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select></td>
                                </div>
                            </div>
                            <div id="row-StartEnd" class="display-hidden">
                                <div class="one">
                                    <input id="startDate" type="text" maxlength="100" value="Start Date" name="startDate" class="solid-darkblue light-text" style="text-align: center; width: 93%; color: #fff; padding: 2%; border: 0; margin-bottom: 10px; margin-left: 20px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                                <div class="two">
                                    <input id="endDate" type="text" maxlength="100" value="End Date" name="endDate" class="solid-darkblue light-text" style="text-align: center; width: 164px; height: 30px; color: #fff; padding: 2%; border: 0; margin-bottom: 10px; margin-left: 10px; margin-top: 2px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                            </div>
                           <%-- <div id="row-chartType" class="display-hidden">
                                <div class="one">
                                    <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                        Chart Layout Type
                                    </div>
                                </div>
                                <div class="two">
                                    <select id="chartType-list" class="solid-darkblue light-text" style="width: 175px; text-align: center; height: 42px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                        <option value="-1">-Any-</option>
                                        <option value="1">Time series, zoomable</option>
                                        <option value="2">Spline</option>
                                    </select>
                                </div>
                            </div>--%>
                            <div id="row-loadChart" class="display-hidden">
                                <div class="two">
                                    <input id="btnLoadChart" type="submit" value="Load Chart" name="btnLoadChart" class="solid-green-2 light-text" style="margin-bottom: 15px; cursor: pointer; text-align: center; width: 175px; margin-left: 11px; color: #fff; padding: 2%; border: 0; margin-top: 10px; height: 39px; line-height: 34px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                            </div>
                            <div id="historic-data" style="width: 880px; height: 400px; margin: 0 auto; display: none;"></div>
                        </div>
                        <%--<button id="getcsv">Alert CSV</button>--%>
                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - Historic -->

                <!-- Start Sub Tab - Live -->
                <label class="nav-subtab subtab-pos-3 solid-green-2" for="nav-subtab-2c">
                    <span>Live</span>
                </label>
                <!-- End Sub Tab - Live -->

                <!-- Start Sub Tab Content - Live -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-2c">
                <div class="nav-sub-container animated nav-fadeInRight nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-3 solid-green-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                       
                        <div class="nav-submitbt light-text"></div>
                        <div class="nav-col-0 dark-text">
                            <div id="chart-loading" class="solid-darkblue light-text" style="display: none; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                Real-time data is currently loading. It may take few seconds.
                            </div>
                            <div class="one">
                                <div class="solid-orange-2 light-text" style="width: 100%; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 28px; height: 28px;">
                                    Device Name
                                </div>
                            </div>
                            <div class="two">
                                <select id="liveDeviceName" class="solid-orange-2 light-text" style="width: 215px; text-align: center; height: 53px; margin-left: 55px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select>
                            </div>
                            <div id="liveRowSensorName" class="display-hidden">
                                <div class="one">
                                    <div class="solid-orange-2 light-text" style="width: 100%; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 28px; height: 28px;">
                                        Sensor Name
                                    </div>
                                </div>
                                <div class="two">
                                    <select id="liveSensorName" class="solid-orange-2 light-text" style="width: 215px; text-align: center; height: 53px; margin-left: 55px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select>
                                </div>
                            </div>
                            <div id="liveRowLoadData" class="display-hidden">
                                <div class="two">
                                    <input id="liveBtnLoadData" type="submit" value="Load Live Chart" name="btnLoadChart" class="solid-green-2 light-text" style="margin-bottom: 15px; cursor: pointer; text-align: center; width: 205px; margin-left: 55px; color: #fff; padding: 2%; border: 0; margin-top: 10px; height: 39px; line-height: 34px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                            </div>
                            <div id="live-data" style="min-width: 880px; min-height: 400px; margin: 0 auto;"></div>
                        </div>
                        <div class="clearspace"></div>
                    </div>
                    <!-- End Content Zone -->

                </div>
                <!-- End Sub Tab Content - Live -->


                <!-- Start Sub Tab - Compare -->
                <label class="nav-subtab subtab-pos-4 solid-orange-2" for="nav-subtab-4c">
                    <span>Compare</span>
                </label>
                <!-- End Sub Tab - Compare -->

                <!-- Start Sub Tab Content - Compare -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-4c" />
                <div class="nav-sub-container animated nav-fadeInRight nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-4 solid-orange-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="nav-submitbt light-text"></div>
                        <div id="compareInstructions" class="solid-purple light-text" style="width: 827px; margin-left: 40px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                            Note: First choose Sensor 1 options and afterwards Sensor 2 options will appear.
                        </div>
                        <div id="compareInfo" class="solid-red light-text" style="display: none; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                        </div>

                        <div class="nav-col-2 dark-text">
                            <div class="solid-darkblue light-text" style="width: 378px; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 28px; height: 28px;">
                                Sensor 1
                            </div>
                            <div class="one">
                                <div class="solid-orange-2 light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 28px; height: 28px;">
                                    Device Name
                                </div>
                            </div>
                            <div class="two">
                                <select id="compareDeviceNameScenario1" class="solid-orange-2 light-text" style="text-align: center; width: 93px; height: 42px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select>
                            </div>
                            <div id="compareRowSensorScenario1" class="display-hidden">
                                <div class="one">
                                    <div class="solid-orange-2 light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 28px; height: 28px;">
                                        Sensor Name
                                    </div>
                                </div>
                                <div class="two">
                                    <select id="compareRowSensorNameScenario1" class="solid-orange-2 light-text" style="width: 93px; text-align: center; height: 40px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select>
                                </div>
                            </div>
                        </div>
                        <div class="nav-col-2 dark-text">
                            <div id="compareRowDeviceNameScenario2" class="display-hidden">
                                <div class="solid-darkblue light-text" style="width: 378px; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 28px; height: 28px;">
                                    Sensor 2
                                </div>
                                <div class="one">
                                    <div class="solid-orange-2 light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 28px; height: 28px;">
                                        Device Name
                                    </div>
                                </div>
                                <div class="two">
                                    <select id="compareDeviceNameScenario2" class="solid-orange-2 light-text" style="width: 93px; text-align: center; height: 42px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select>
                                </div>
                            </div>
                            <div id="compareRowSensorScenario2" class="display-hidden">
                                <div class="one">
                                    <div class="solid-orange-2 light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 28px; height: 28px;">
                                        Sensor Name
                                    </div>
                                </div>
                                <div class="two">
                                    <select id="compareRowSensorNameScenario2" class="solid-orange-2 light-text" style="width: 93px; text-align: center; height: 40px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select></td>
                                </div>
                            </div>
                        </div>
                        <div class="nav-col-0 dark-text">
                            <div id="compareRowStartEnd" class="display-hidden">
                                <div class="one">
                                    <input id="compareStart" type="text" maxlength="100" value="Start Date" name="startDate" class="solid-darkblue light-text" style="text-align: center; width: 100%; color: #fff; padding: 2%; border: 0; margin-bottom: 10px; margin-left: 20px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                                <div class="two">
                                    <input id="compareEnd" type="text" maxlength="100" value="End Date" name="endDate" class="solid-darkblue light-text" style="text-align: center; width: 193px; height: 30px; color: #fff; padding: 2%; border: 0; margin-bottom: 10px; margin-left: 55px; margin-top: 2px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                            </div>
                            <%--<div id="compareRowChartLayout" class="display-hidden">
                                <div class="one">
                                    <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px; width: 630px;">
                                        Chart Layout Type
                                    </div>
                                </div>
                                <div class="two">
                                    <select id="compareChartLayout" class="solid-darkblue light-text" style="width: 205px; text-align: center; height: 42px; margin-left: 55px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                        <option value="-1">-Any-</option>
                                        <option value="1">Time series, zoomable</option>
                                        <option value="2">Spline</option>
                                    </select>
                                </div>
                            </div>--%>
                            <div id="compareRowLoadChart" class="display-hidden">
                                <div class="two">
                                    <input id="compareBtnLoad" type="submit" value="Load Chart" name="btnLoadChart" class="solid-green-2 light-text" style="margin-bottom: 15px; cursor: pointer; text-align: center; width: 205px; margin-left: 55px; color: #fff; padding: 2%; border: 0; margin-top: 10px; height: 39px; line-height: 34px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                            </div>
                            <div id="compare-data" style="min-width: 880px; min-height: 400px; margin: 0 auto; display: none;"></div>

                        </div>
                        <div class="clearspace"></div>
                    </div>
                    <!-- End Content Zone -->

                </div>
                <!-- End Sub Tab Content - Compare -->


            </div>
            <!-- End Main Item - Metro Style -->
        </div>
    </div>
</asp:Content>

